@extends('admin.layouts.layout')
@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox-title">
                <h5>实时在线情况</h5>
            </div>
            <div class="ibox-content">
                <form class="form-horizontal " action="{{route('stat.liveOnline')}}" method="post"
                      enctype="multipart/form-data">
                    {!! csrf_field() !!}
                    <table class="table-striped table-bordered table-hover table-condensed">
                        <tr class="b-group">
                            <td class="b-child" colspan="2">
                                <table class="table-striped table-bordered table-hover table-condensed"
                                       style="margin: 0px;">
                                    <tr class="b-group">
                                        <td>
                                            @include('widget.between_datetime',['showEndTime'=>true])
                                        </td>
                                        <td>
                                            @include('widget.query_and_refresh')
                                        </td>
                                        <td>
                                            @include('widget.dataType')
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;
                                    <input type="checkbox" checked="checked" value=""
                                           onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:6.5rem;overflow-y:scroll;">
                                    @include('widget.channel')
                                </div>
                            </td>
                        </tr>
                        <tr class="b-group">
                            <th width="10%">
                                <label>全选/不选&nbsp;&nbsp;
                                    <input type="checkbox" checked="checked" value="" onclick="checkAll(this)"></label>
                            </th>
                            <td class="b-child">
                                <div style="max-height:10rem;overflow-y:scroll;">
                                    @include('widget.server')
                                </div>
                            </td>
                        </tr>
                    </table>
                </form>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            {{--                <div class="ibox-title">--}}
                            {{--                    <h5>分时在线统计</h5>--}}
                            {{--                </div>--}}
                            <div class="ibox-content">
                                <div class="echarts" id="echarts-pie-chart-pay-users"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <table class="table table-striped table-bordered table-hover m-t-md text-center tblData" data-toggle="table"
                       data-pagination="true">
                    <thead>
                    <tr>
                        <th class="text-center">时间</th>
                        <th class="text-center">最高在线人数</th>
                        <th class="text-center">平均在线人数</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($data as $key => $item)
                        <tr>
                            <td>{{$item['register_time']}}</td>
                            <td>{{$item['rush_hour']}}</td>
                            <td>{{$item['avg_amounts']}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <script>
    </script>
    <link href="{{loadEdition('/admin/css/plugins/datapicker/bootstrap-datepicker.css')}}" rel="stylesheet">
    <link href="{{loadEdition('/admin/js/plugins/bootstrap-table/bootstrap-table.min.css')}}" rel="stylesheet">
@endsection
@section('js')
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/datapicker/bootstrap-datepicker.zh-CN.js')}}"></script>

    <script src="{{loadEdition('/admin/js/plugins/echarts/echarts.min.js')}}"></script>

    <script src="{{loadEdition('/admin/js/plugins/bootstrap-table/bootstrap-table.min.js')}}"></script>
    <script src="{{loadEdition('/admin/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js')}}"></script>

    <script src="{{loadEdition('/js/global.js')}}"></script>
    <script>
        //饼图
        echarts.init(document.getElementById('echarts-pie-chart-pay-users')).setOption({
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['峰值人数', '平均在线人数']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: {!!$time!!},
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '峰值人数',
                    type: 'line',
                    data: {!! $rushHour !!},
                },
                {
                    name: '平均在线人数',
                    type: 'line',
                    data: {!! $avg !!},
                }
            ]
        });
    </script>
@stop